<!-- eslint-disable @typescript-eslint/indent -->
<script setup lang="ts">
import { ref } from 'vue';
import pageSchema from './management-list.json';
import { complexData, treeNodeIconsData } from './demo-data';

const title = ref('Farris Vue Designer');
const schema = ref<any>(pageSchema.contents[0]);

const onClickToolbarItem = (itemId: string) => {
    alert(itemId);
};

function executeMethod($event: MouseEvent, method: string) {
    window.alert(`The button named ${method} is clicked.`);
}

const items = [
    { id: 'save', text: '保存', onClick: executeMethod },
    { id: 'run', text: '运行', onClick: executeMethod, class: 'btn-primary' }
];

/** 是否显示展示图标，默认为false */
const showTreeNodeIcons = ref(false);
const dragulaCompostion = ref();
function onCanvasInitialized(dragula: any) {
    dragulaCompostion.value = dragula;
}
function showChoosedItem(value) {
    console.log(value);
}
</script>

<template>
    <div class="f-page f-page-navigate f-page-is-grid-card">
        <f-page-header :title="title" :buttons="items" @click="onClickToolbarItem"></f-page-header>
        <div class="f-page-main">
            <f-splitter class="f-page-content">
                <f-splitter-pane class="f-col-w3 f-page-content-nav" position="left" style="min-width: 230px">
                    <div class="f-struct-wrapper f-utils-fill-flex-column">
                        <f-tabs tab-type="pills" justify-content="center">
                            <f-tab-page id="tools" title="控件树">
                                <f-control-tree-view
                                    :data="pageSchema"
                                    :tree-node-icons-data="treeNodeIconsData"
                                    :show-tree-node-icons="true"
                                    @output-value="(value) => showChoosedItem(value)"
                                ></f-control-tree-view>
                            </f-tab-page>
                            <f-tab-page id="outline" title="工具箱">
                                <f-designer-toolbox :dragula="dragulaCompostion"></f-designer-toolbox>
                            </f-tab-page>
                        </f-tabs>
                    </div>
                </f-splitter-pane>
                <f-splitter-pane class="f-page-content-main" position="center">
                    <f-designer-canvas v-model="schema" @init="onCanvasInitialized"></f-designer-canvas>
                </f-splitter-pane>
            </f-splitter>
        </div>
    </div>
</template>

<style>
#app {
    max-width: initial !important;
    margin: initial !important;
    padding: initial !important;
}
.logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
}
.logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
    filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
